<template>
<div class="box">
    <el-form :model="ruleForm" :inline="false" :rules="rules" ref="ruleForm" label-width="220px" class="demo-ruleForm" size="medium">
        <!-- <h2 class="tle">业务申请信息填写</h2> -->
        <div class="must">
            <!-- <el-form-item label="申请人名称(中文)：">
          <el-input v-model="ruleForm.appNameCn" placeholder="请填写申请人名称(中文)"></el-input>
        </el-form-item>
        <el-form-item label="(英文)：">
          <el-input v-model="ruleForm.appNameEn" placeholder="请填写申请人名称(英文)"></el-input>
        </el-form-item>
        <el-form-item label="申请人地址(中文)：">
          <el-input v-model="ruleForm.appAddCn" placeholder="请填写申请人地址(中文)"></el-input>
        </el-form-item>
        <el-form-item label="(英文)：">
          <el-input v-model="ruleForm.appAddEn" placeholder="请填写申请人地址(英文)"></el-input>
        </el-form-item>-->
            <!-- <el-form-item label="联系人：" prop="linkman">
                <el-input v-model="ruleForm.linkman" placeholder="请填写联系人"></el-input>
                <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>示例：北京市xxx网络科技有限公司/张三</span>
                    </div>
                </div>
            </el-form-item> -->
            <!-- <el-form-item label="代理机构名称：">
          <el-input v-model="ruleForm.ageName" placeholder="请填写代理机构名称"></el-input>
        </el-form-item> -->
        <!-- <el-form-item label="代理机构名称：" prop="ageName">
          <el-input v-model="ruleForm.ageName" placeholder="请填写代理机构名称"></el-input>
          <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提醒：代理机构名称:公司名称</span>
                  <span>示例：北京市xxx网络科技有限公司</span>
                </div>
          </div>
        </el-form-item> -->
            <el-form-item label="原商标申请号：" prop="oldnum">
                <el-input v-model="ruleForm.oldnum" placeholder="请填写原商标申请号"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：原商标申请号不能为空</span>
                    </div>
                </div> -->
            </el-form-item>
            <el-form-item label="撤回理由：" prop="reason">
                <el-input type="textarea" v-model="ruleForm.reason" placeholder="请填写撤回理由"></el-input>
                <!-- <div class="inform">
                    <img src="../../assets/imgs/inform.png" alt="通知" />
                    <div class="content">
                        <span>提醒：撤回理由不能为空</span>
                    </div>
                </div> -->
            </el-form-item>
            <el-form-item class="upload" label="网上确认书：" prop="upload">
                <span id="star">*</span>
                <upfile :callback="setSure">
                    <img :src="old_imgs['qrfile']" v-if="old_imgs['qrfile']" style="width:148px; hieght:148px" />
                </upfile>
                <div class="exam-img">
                    <div class="img-inform">
                        <img src="../../assets/imgs/inform.png">
                        <span>示例:</span>
                    </div>
                    <examimg :imgType="7"></examimg>
                </div>
                <div>
                    <span class="informs">
                        请点此
                        <a :href="mconfig.host + '/file/download?fileType=4'">下载网上确认书</a>,查到相应商标编号并填充
                    </span>
                    <br />
                    <span class="notice">请将下载的网上确认书填写完成, 然后上传JPG文件或是PNG文件</span>
                </div>
            </el-form-item>
            <el-form-item label="其他附件：">
              <uploads
                  :callback="backUrl"
                  :delUrl="delUrl"
                  :file_config="{field:'dengjichenluofile'}"
                  :list="ruleForm.dengjichenluofile"></uploads>
              <div class="inform">
                <img src="../../assets/imgs/inform.png" alt="通知" />
                <div class="content">
                  <span>提示：其他附件</span>
                </div>
              </div>
            </el-form-item>
            <el-form-item>
                <div class="btns">
                    <el-button type="primary" @click="outStep">上一步</el-button>
                    <!-- <el-button type="primary" @click="dialogVisible = true">提交并审核</el-button> -->
                    <el-button type="primary" @click="testing('ruleForm')">提交并审核</el-button>
                </div>
            </el-form-item>
            <el-dialog class="dialog" :show-close="false" :center="true" :visible.sync="dialogVisible" width="460px" :before-close="handleClose">
                <div class="hint">
                    <img src="../../assets/imgs/branch.png" alt="提示图片" />
                    <span>选择您想去办理的网点</span>
                </div>
                <el-form-item label="选择网点：" prop="value" >
                    <el-select v-model="ruleForm.value" placeholder="请选择">
                        <el-option v-for="item in options" :key="item.deptId" :label="item.deptName" :value="item.deptId">
                            <span style="float: left">{{ item.deptName }}</span>
                            <span style="float: right; color: #8492a6; font-size: 13px">{{ item.address }}</span>
                        </el-option>
                    </el-select>
                </el-form-item>
                <div slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false" class="cancel">取 消</el-button>
                    <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
                </div>
            </el-dialog>
            <el-dialog class="hintMsg" :show-close="false" title="温馨提示" :visible.sync="centerDialogVisible" width="462px">
                <span>您的信息已提交，工作人员将在3-5日内对你的信息审核，审核通过后即可预约业务，审核结果将通过短信的方式发送给你。</span>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="skip">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </el-form>
</div>
</template>

<script>
import upfile from "../common/upfile.vue";
import BaseUpload from "./BaseUpload";
import examimg from "../common/imgExample";
import uploads from "@/components/common/uploads";
export default {
    data() {
        return {
            //网点列表
            options: [],
            //提交成功弹出框变量
            centerDialogVisible: false,
            //网点弹出框控制变量
            dialogVisible: false,
            //提交表单
            formData: new FormData(),
            // 是否有网上确认书
            showImg: '',
            // add:0,
            //表单唯一id
            classId: "",
            //填写的信息
            ruleForm: {
                linkman: "",
                ageName: "",
                oldnum: "",
                reason: "",
                value: "",
                // appNameCn: "",
                // appNameEn: "",
                // appAddCn: "",
                // appAddEn: "",
                // 其他附件
                dengjichenluofile:[],
            },
            old_imgs: {},
            amend: "", //  修改的数据回去
            mark: false, //  确认书的标记
            rules: {
                // 其他附件
                dengjichenluofile: [
                  { required: true, message: "附件不能为空", trigger: "change" },
                ],
                linkman: [
                    // 受让人名称
                    { required: true, message: "内容不能为空", trigger: "change" },
                    {
                        pattern: /^[\u4e00-\u9fa5\(\)\/\,\da-zA-Z&]{2,50}$/gi,
                        message: "联系人输入错误",
                    },
                ],
                oldnum: [
                    // 原商标申请号：
                    { required: true, message: "内容不能为空", trigger: "change" },
                    {pattern: /^\d{0,30}$/,message: "请输入正确的商标申请号",trigger: "blur"},
                    // {
                    //   pattern: /^[0-9]*$/,
                    //   message: "申请号输入错误",
                    // },
                ],
                //  upload: [
                //   { required: false, message: "选项不能为空", trigger: "change" },
                // ],
                reason: [
                    // 撤回理由
                    { required: true, message: "内容不能为空", trigger: "change" },
                ],
                ageName:[
                   { required: true, message: "内容不能为空", trigger: "change" },
                    {
                        pattern: /^[\u4e00-\u9fa5\(\)()\da-zA-Z&]{2,50}$/gi,
                        message: "联系人输入错误",
                    },
                ]
            },
        };
    },
    mounted() {

        //获取从存储在路由中的classId
        this.classId = this.$route.query.id;
        //获取网点列表
        this.$http.get("/trademark/system/dept/findDept").then((res) => {
            this.options = res.data.data;
        });
        //判断是否为修改
        if (this.$store.state.stateJdg) {
            this.add(this.$store.state.alterData.public.id);
            this.showImg = true;
        }
    },
    methods: {
        backUrl(url,file_config){
          this.ruleForm[file_config["field"]].push(url)
        },
        delUrl(index,file_config){
          this.ruleForm[file_config["field"]].splice(index,1)
          this.$set(this.ruleForm,file_config["field"],this.ruleForm[file_config["field"]])
        },
        //修改时的数据回显
        add(e) {
            this.$http
                .get("/trademark/proTWithdraw/findByIdDetl", {
                    params: { id: e },
                })
                .then((res) => {
                    // console.log(res,99999);
                    this.amend = res.data.data.data;
                    this.ruleForm.linkman = this.amend.contacts; // 联系人
                    this.ruleForm.oldnum = this.amend.appNum;
                    this.ruleForm.reason = this.amend.reasons;
                    this.classId = this.amend.classId;
                    this.old_imgs.qrfile = this.mconfig.host + this.amend.qrfile;
                    // 其他附件
                    this.ruleForm.dengjichenluofile = JSON.parse(this.amend.otherfile);
                    // console.log(this.old_imgs.qrfile);
                    this.mark = false;
                });
        },
        //确认书
        setSure(files) {
            this.ruleForm.qrfile = files[0];

            let old = JSON.parse(JSON.stringify(this.old_imgs));
            this.old_imgs = {};
            delete old["qrfile"];
            this.old_imgs = old;
            this.mark = false;

            if (this.ruleForm.qrfile) {
                this.showImg = true
            } else {
                this.showImg = false
            }
        },
        //返回上一步
        outStep() {
            this.$emit("wp", 1, "请填写申请业务信息");
        },
        //提示模板
        open1(msg, types = "success") {
            this.$message({
                message: msg,
                type: types,
            });
        },
        //弹出框的选项确认框
        handleClose(done) {
            this.$confirm("确认关闭？")
                .then((_) => {
                    done();
                })
                .catch((_) => {});
        },

        // 提交前验证
        testing(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid == false) {

                    this.dialogVisible = false
                } else {
                    if (this.showImg) {
                        this.dialogVisible = true
                    } else {
                        this.open1("网上确认书未上传", "error");
                    }
                }
            })
        },

        //表单提交事件
        submitForm(formName) {
            let _this = this;
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //每次提交重新生成新的FormData用于储存新的数据
                    var formData = new FormData();

                    this.formData = new FormData()
                    //获取vuex中保存的步骤二中的数据
                    let {
                        number, //营业执照编号
                        numbers, //身份证号
                        person_type,
                        phone,
                        province, //省份
                        city, //城市
                        legal, //法人
                        postal,
                        nationality, //申请人国籍
                    } = this.$store.state.storeDatas;
                    let arr = this.$store.getters.getRuleForm;
                    for (let key in arr) {
                        this.formData.append(key, arr[key]);
                    }

                    //向FormData中添加数据
                    this.formData.append("ageName", this.ruleForm.ageName); //代理机构名称
                    // this.formData.append("appNameCn", this.ruleForm.appNameCn);
                    // this.formData.append("appNameEn", this.ruleForm.appNameEn);
                    // this.formData.append("appAddCn", this.ruleForm.appAddCn);
                    // this.formData.append("appAddEn", this.ruleForm.appAddEn);
                    this.formData.append("appNum", this.ruleForm.oldnum); //原商标申请号
                    this.formData.append("appliType", Number(this.$store.state.type));
                    this.formData.append("classId", this.classId);
                    this.formData.append("contacts", this.ruleForm.linkman);
                    this.formData.append("optype", 1);
                    this.formData.append("qrfiles", this.ruleForm.qrfile);
                    this.formData.append("reasons", this.ruleForm.reason);
                    this.formData.append("branchNetworkId", this.ruleForm.value);
                    // 其他附件
                    this.formData.append('otherfile', JSON.stringify(this.ruleForm.dengjichenluofile));
                    let urls = "";
                    if (this.$store.state.alterData.public) {
                        this.formData.append("id", this.$store.state.alterData.public.id);
                        urls = "trademark/proTWithdraw/modifyNoCommit";
                    } else {
                        urls = "trademark/proTWithdraw/firstSubmit";
                    }
                    //配置请求头
                    var config = {
                        header: {
                            "Content-Type": "multipart/form-data",
                        },
                    };
                    this.$http
                        .post(urls, this.formData, config)
                        .then(function (response) {
                            //console.log(response);
                            //若状态码不为200则不跳转v bvb vvccvb vbvbcgvbc
                            if (response.data.code != 200) {
                                _this.open1("提交失败", "error");
                                return;
                            }
                            //提交成功
                            _this.dialogVisible = false;
                            _this.centerDialogVisible = true;
                            this.$store.commit("storeDatas", {});
                            this.$store.commit("setPicType", 0);
                            this.$store.commit("setCompanyCardInfo", {});
                            this.$store.commit("setIdCardInfo", {});
                        })
                        .catch(function (error) {
                            //////console.log(error);
                        });
                } else {
                    return false;
                }
            });
            this.mark = true;
        },
        //跳转函数
        skip() {
            this.centerDialogVisible = false;
            this.open1("操作成功");
            this.$router.push({
                path: "/business/myBusiness/auditing",
            });
        },
        //重置表单函数(没用上)
        resetForm(formName) {
            this.$refs[formName].resetFields();
        },
    },
    components: {
        upfile,
        BaseUpload,
        examimg,
        uploads,
    },
};
</script>

<style lang="less" scoped>
.btns {
    display: flex;
    justify-content: center;

    .el-button {
        margin: 0 20px;
    }
}

.box {
    display: flex;
    flex-direction: column;
    align-items: center;
    // margin-top: 100px;
    width: 100%;
    min-height: 800px;

    .tle {
        font-size: 24px;
        color: #000;
    }

    // .must,
    // .select {
    //   display: flex;
    //   position: relative;
    //   flex-direction: column;
    //   align-items: center;
    //   justify-content: center;
    //   padding: 30px 0 30px;
    //   margin-bottom: 80px;
    //   // width: 1000px;
    //   // border: 1px solid #bbbbbb;
    //   border-radius: 10px;
    //   .el-form-item {
    //     width: 680px;
    //   }
    //   .inline {
    //     display: flex;
    //     .el-form-item {
    //       margin: 0;
    //       width: 290px !important;
    //     }
    //   }
    // }

    .must,
    .select {
        display: flex;
        position: relative;
        left: -60px;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 30px 0 30px;
        // width: 1000px;
        // border: 1px solid #bbbbbb;
        border-radius: 10px;

        .inform {
            display: flex;
            align-items: center;
            position: absolute;
            top: 0;
            left: 100%;
            width: 250px;
            height: 32px;
            color: #f96900;
            font-size: 10px;
            line-height: 16px;

            img {
                margin: 11px;
            }

            .content {
                display: flex;
                flex-direction: column;

                .ts {
                    text-indent: 3em;
                }
            }
        }

        .el-form-item {
            width: 580px;
        }

        .inline {
            display: flex;

            .el-form-item {
                margin: 0;
                width: 290px !important;
            }

            margin-bottom: 22px;
        }
    }

    .must {
        margin-left: -266px;
        margin-bottom: 20px;
    }

    .line {
        width: calc(100% - 280px);
        margin: 10px auto;
        height: 1px;
        border-top: 1px dashed #d9d9d9;
    }

    .imgHint {
        margin: 5px;
        font-size: 12px;
        line-height: 17px;
        color: #f96900;
    }

    .affirm {
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .input {
        width: 190px;
    }

    .upload {
        margin: 20px 0;
    }

    .type-number {
        width: 250px;
    }

    .informs {
        position: absolute;
        width: 500px;
        font-size: 12px;
        color: #a0a3a5;

        a {
            text-decoration: none;
            color: #3685ff;
        }
    }

    .notice {
        color: #f00;
        font-size: 12px;
    }

    .tle {
        list-style: none;
        margin: 40px 0 20px;
        font-size: 24px;

        &~.tle {
            color: #bbb;
        }
    }

    .hint {
        color: #f96900;
        background-color: #fff;

        .el-form-item__label {
            width: 150px;
        }

        img {
            width: 20px;
        }
    }

    .el-steps {
        width: 70%;
        height: 200px;
    }

    .el-button {
        //display: block;
        display: inline;
        margin: 0 20px;
        // background-color: #67c23a !important;
        // border-color: #67c23a !important;
    }

    .common .el-button {
        background-color: #fff !important;
        border-color: #bbb !important;
    }
}

.dialog-footer {
    display: flex;
    justify-content: space-between;
    color: #fff;

    .lan {
        background-color: #2c9dfc !important;
        border-color: #2c9dfc !important;
    }
}

.dialog /deep/.el-form-item__label {
    width: 100px !important;
}

.dialog /deep/.el-form-item__content {
  margin-left: 100px !important;
  display: flex;
  justify-content: left;
}

.dialog /deep/.el-input {
    width: 250px;
}

.el-checkbox-group {
    line-height: 14px;
}

// .is-checked/deep/.el-radio__inner,
// .is-checked/deep/.el-checkbox__inner {
//     border-color: #999999;
//     background: #999999;
// }

.el-radio/deep/.el-radio__inner:hover {
    border-color: #999999 !important;
}

.is-checked/deep/.el-radio__label,
.is-checked/deep/.el-checkbox__label {
    color: #333;
}

.is-focus .el-checkbox__inner {
    border-color: #999999 !important;
}

.el-checkbox/deep/.el-checkbox__inner:hover {
    border-color: #999999 !important;
}

.el-step__head.is-process {
    border-color: #f96900;
    color: #f96900 !important;
}

.hintMsg {
    /deep/.el-dialog__header {
        display: flex;
        justify-content: center;
        font-weight: bold;
    }

    .dialog-footer {
        justify-content: center;

        .el-button {
            border-color: #2c9dfc !important;
            background: #2c9dfc !important;
        }
    }
}

.cancel {
    background: #ccc;
    border-color: #ccc;
}
#star{
  position: absolute;
  color: red;
  margin-left: -105px;
}
.exam-img{
  position: absolute;
  top: 0;
  left: 435px;
}
.img-inform{
  img{
    position: absolute;
    top: 50%;
    left: 50%;
    margin-left: -140px;
    transform: translate(-50%,-50%);
  }
  span{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%,-50%);
      white-space: nowrap;
      margin-left: -100px;
      width: 50px;
      color: #f96900;
  }
}
</style>
